<template>
  <div class="editor-content">
    <div class="editor-box" contenteditable="true" @keydown.backspace="handleDel" >
      <span>这个是测试</span>
      <span class="labeled_wrapper_span" contenteditable="true">
        <span contenteditable="false" style="vertical-align: top; font-size: 0px; user-select: none;">&nbsp;</span>
        <span>关键字12</span>
        <span contenteditable="false" style="vertical-align: top; font-size: 0px; user-select: none;">&nbsp;</span>
      </span>
      <span>这个是测试</span>
      <span class="labeled_wrapper_span" contenteditable="true">
        <span contenteditable="false" style="vertical-align: top; font-size: 0px; user-select: none;">&nbsp;</span>
        <span><span data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">陌生同事</span></span></span></span>
        <span contenteditable="false" style="vertical-align: top; font-size: 0px; user-select: none;">&nbsp;</span>
      </span>
      <span>这个是测试</span>
      <span class="labeled_wrapper_span" contenteditable="false">
        <span>整体</span>
      </span>
      <span>这个是测试</span>
    </div>
  </div>
</template>

<script setup>
const handleDel = (e) => {
  debugger
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  console.log(range)
}
</script>

<style scoped lang="less">
.editor-content {
  position: relative;
  box-sizing: border-box;
  height: 100px;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid rgba(76, 170, 238, 0.53);
  font-size: 14px;
}

.editor-box {
  position: relative;
  outline: none;
  min-height: 66px;
  caret-color: #3060FC;
  .labeled_wrapper_span {
    display: inline-block;
    font-weight: 600;
    color: #3060FC;
    background: rgba(48, 96, 252, 0.2);
    padding: 2px 6px;
    margin: 0 3px;
    border-radius: 3px;
  }
}
</style>
